import React from "react";
import { View, Text, TouchableOpacity } from "react-native";

import TImage from "../../components/TImage";
import BaseItem from "../common/BaseItem";
import SizeUtils from "../../common/SizeUtils";
import CommonAvatarView from "../common/CommonAvatarView";

// DqappStep {
//   by_name (string, optional): 用户名字 ,
//   by_user_id (string, optional): 用户ID ,
//   department (string, optional): 所属单位 ,
//   steps (integer, optional): 步行数 ,
//   updated_at (string, optional): 最后编辑时间
//   }
export default class SportUserItem extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (
      this.props.data != nextState.data ||
      this.props.data.self_rank != nextProps.data.self_rank ||
      this.props.data.steps != nextProps.data.steps ||
      this.props.data.avatar_url != nextProps.data.avatar_url ||
      this.props.data.by_name != nextProps.data.by_name ||
      this.props.data.department != nextProps.data.department
    ) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          width: this.props.style.width,
          justifyContent: "space-between",
          height: SizeUtils.translateDesignHeightToCode(140),
          borderColor: "#eeeeee",
          paddingLeft: SizeUtils.translateDesignWidthToCode(35),
          paddingRight: SizeUtils.translateDesignWidthToCode(32),
          borderBottomWidth: SizeUtils.translateFontSizeToCode(3)
        }}
      >
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text
            style={{
              color: "#667479",
              fontSize: SizeUtils.translateFontSizeToCode(26)
            }}
          >
            {this.props.data.self_rank}
          </Text>
          {this._renderShowImage()}
          {this._renderName()}
        </View>
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(50),
            color: "#6bcdf4"
          }}
        >
          {this.props.data.steps}
          <Text
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(24),
              color: "#999999"
            }}
          >
            {" "}
            步
          </Text>
        </Text>
      </View>
    );
  }

  _renderShowImage() {
    return (
      <View
        style={{
          paddingLeft: SizeUtils.translateDesignWidthToCode(38),
          width: SizeUtils.translateDesignWidthToCode(70),
          height: SizeUtils.translateDesignWidthToCode(100)
        }}
      >
        <CommonAvatarView
          avatarUri={this.props.data.avatar_url}
          size={70}
          style={{ paddingTop: SizeUtils.translateDesignHeightToCode(18) }}
        />
        <View
          style={{
            position: "absolute",
            left: SizeUtils.translateDesignHeightToCode(20),
            top: 0
          }}
        >
          <TImage
            source={this._getNumImage()}
            style={{
              width: 34,
              height: 34
            }}
          />
        </View>
      </View>
    );
  }

  _getNumImage() {
    let source = { uri: "" };
    switch (this.props.index) {
      case 1:
        source = require("../../../resource/images/sport/icon_level1.png");
        break;
      case 2:
        source = require("../../../resource/images/sport/icon_level2.png");
        break;
      case 3:
        source = require("../../../resource/images/sport/icon_level2.png");
        break;
    }
    return source;
  }

  _renderName() {
    return (
      <View
        style={{
          paddingLeft: SizeUtils.translateDesignWidthToCode(60),
          // flexDirection: "row",
          // alignItems: "center"
          justifyContent: "center"
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(30),
            color: "#000000"
          }}
        >
          {this.props.data.by_name}
        </Text>
        <Text
          style={{
            // paddingLeft: SizeUtils.translateDesignWidthToCode(12),
            color: "#888888",
            fontSize: SizeUtils.translateFontSizeToCode(24)
          }}
        >
          {this.props.data.department ? this.props.data.department : ""}
        </Text>
      </View>
    );
  }
}
